<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情页-维多购物平台</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <link href="./bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/index.js" type="module" defer="defer"></script>
    <script src="./js/cookie.js"></script>
    <style>
        header {
            background-color: rgba(0,0,0,.7);;
            backdrop-filter: blur(20px);
        }

        main {
            padding: 10px;
            margin: 80px 0 40px 0;
        }

        .add-success,
        .product-content-one {
            max-width: 1000px;
        }

        .product-content-one {
            background-color: var(--color-background);
            border-radius: 3px;
            width: 100%;
            display: flex;
        }

        .one-info,
        .one-image {
            width: 50%;
            padding: 10px 10px 10px 5px;
            gap: 5px;
            display: flex;
            flex-direction: column;
        }

        .one-image img {
            width: 100%;
        }

        #one-config {
            color: var(--ui-colors-neutral9);
        }

        .one-info input {
            display: none;
        }

        #one-version,
        #one-color {
            width: 100%;
            display: flex;
            gap: 5px;
            flex-flow: wrap;
        }

        .one-info label {
            width: 49%;
            margin: 0;
        }

        .one-info label span {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 0;
            border:2px solid var(--ui-colors-neutral7);
            color: var(--ui-colors-neutral9);
        }

        .one-info input:checked + span {
            border:2px solid var(--ui-colors-orange);
            color: var(--ui-colors-orange);
        }

        .one-price {
            width: 100%;
            margin: 20px 0;
            padding: 10px;
            background-color: var(--ui-colors-neutral3);
        }

        .one-price h3 {
            color: var(--ui-colors-orange);
        }

        .see-evaluate,
        .add-trolley {
            width: 100%;
            color: var(--color-background);
            height: 40px;
            border-radius: 3px;
            font-size: 18px;
            font-weight: 800;
            background-color: var(--ui-colors-orange);
            margin-bottom: 20px;
        }

        .see-evaluate {
            display: flex;
            background-color: var(--ui-colors-neutral5);
            color: var(--ui-colors-orange);
            align-items: center;
            justify-content: center;
        }

        .see-evaluate:hover {
            color: var(--ui-colors-orange);
        }

        #none {
            height: 400px;
            width: 100%;
            max-width: 1000px;
            background-color: var(--color-background);
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ui-colors-orange); 
        }

        #none h1 {
            font-weight: 900;
        }

        .add-success {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            background-color: var(--color-background);
        }

        .add-success .operate {
            gap: 10px;
        }

        .add-success button {
            width: 150px;
            height: 45px;
            border:2px solid var(--ui-colors-neutral7);
        }

        .add-success button.go {
            background-color: var(--ui-colors-orange);
            color: var(--color-background);
        }
    </style>
</head>

<body>
    <header id="header" class="no-user">
        <div class="logo">
            <img src="./images/logo.png" alt="logo">
        </div>
        <nav class="main-menu">
            <a href="/">首页</a>
            <a href="/allphone">手机</a>
            <a href="/allcomputer">电脑</a>
        </nav>
        <div class="user-info">
            <div class="user-operate">
                <div class="user-default">
                    <a href="/account#login">登录</a>
                    <span>|</span>
                    <a href="/account#register">注册</a>
                </div>
                <div class="user-one">
                    <div class="user-name">
                        <span id="username"></span>
                        <svg t="1687403727017" class="icon-user" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="872" width="15" height="15"><path d="M468.7872 738.5088c0-10.4448 4.096-20.8896 12.0832-28.8768L929.792 260.7104c15.9744-15.9744 41.984-15.9744 57.9584 0 7.9872 7.9872 12.0832 18.432 12.0832 28.8768s-4.096 20.8896-12.0832 28.8768L538.624 767.3856c-15.9744 15.9744-41.984 15.9744-57.9584 0-7.9872-7.9872-11.8784-18.432-11.8784-28.8768z" p-id="873"></path><path d="M30.3104 260.9152c7.9872-7.9872 18.432-12.0832 28.8768-12.0832s20.8896 4.096 28.8768 12.0832l448.9216 448.9216c15.9744 15.9744 15.9744 41.984 0 57.9584-7.9872 7.9872-18.432 12.0832-28.8768 12.0832s-20.8896-4.096-29.0816-12.0832L30.3104 318.6688c-15.9744-15.9744-15.9744-41.7792 0-57.7536z" p-id="874"></path></svg>
                    </div>
                    <div class="user-links">
                        <ul>
                            <li><a href="/user"  target="_blank">个人中心</a></li>
                            <li><a href="/wallet"  target="_blank">我的钱包</a></li>
                            <li><a href="/order"  target="_blank">我的订单</a></li>
                            <li><a href="/uevaluate"  target="_blank">评论晒单</a></li>
                            <li><a href="/" onclick="ClearCookie()">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <a href="/trolley" class="mini-shopping-cart">购物车(<span id="count-trolley">0</span>)</a>
            </div>
    </header>
    <main class="product-one">
        <div class="product-content-one" id="one">
            <div class="one-image"><img src="" alt="" id="one-image"></div>
            <div class="one-info">
                <h2 id="one-name"></h2>
                <span id="one-config"></span>
                <hr>
                <h4>选择版本</h4>
                <div id="one-version"></div>
                <h4>选择颜色</h4>
                <div class="one-color" id="one-color"></div>
                <div class="one-price">
                    <span id="one-choice"></span>
                    <h3 id="one-price"></h3>
                </div>
                <button class="add-trolley" onclick="addTrolley()">加入购物车</button>
                <a class="see-evaluate" id="see-evaluate">查看评价</a>
            </div>
        </div>
        <div class="none" id="none">
            <h1>没有找到此商品</h1>
        </div>
        <div class="add-success" style="display: none;" id="add-success">
            <h2>加入成功！</h2>
            <div class="operate">
                <button onclick="goBack()" class="back">回到商品页</button>
                <button onclick="goTrolley()" class="go">前往购物车</button>
            </div>
        </div>
    </main>
    <div class="main-bottom bottom">
        <div class="footer-links clearfix">
            <dl class="col-links col-links-first">
                <dt></dt>
            </dl>
            <dl class="col-links ">
                <dt>选购指南</dt>
                <dd><a rel="nofollow" href="/allphone">手机</a></dd>
                <dd><a rel="nofollow" href="/allcomputer">电脑</a></dd>
            </dl>

            <dl class="col-links ">
                <dt>服务中心</dt>
                <dd><a rel="nofollow" onclick="openChat()" style="cursor: pointer">智能客服</a></dd>
                <dd><a rel="nofollow" href="/order" target="_blank">订单查询</a></dd>
            </dl>

            <dl class="col-links ">
                <dt>关于</dt>
                <dd><a rel="nofollow" href="/about" target="_blank">了解我们</a></dd>
            </dl>
        </div>
        <div class="site-info">
            <div class="logo ir"></div>
            <div class="info-text">
                <p class="sites">
                    <a rel="nofollow" href="/" target="_blank">维多购物平台</a>
                    <span class="sep">|</span>
                    <a rel="nofollow" href="https://sugarscat.com" target="_blank"
                    >隐私政策</a
                    >
                </p>
                <p class="sites">
                    <a rel="nofollow" href="http://www.cca.org.cn/" target="_blank"
                    >中国消费者协会</a
                    >
                    <span class="sep">|</span>
                    <a rel="nofollow" href="http://www.bj315.org/" target="_blank"
                    >北京市消费者协会</a
                    >
                </p>
                <p>
                    &copy;2023-至今 版权所有 维多购物平台
                    <br />
                    本网站所列数据、图片，均来自互联网已公开信息，仅供交流学习！
                </p>
            </div>
        </div>
    </div>
</body>
<script src="./js/message.js"></script>
<script src="./js/chat.js"></script>
<script>
    // 检查登录状况
    function checkLogin() {
        const header = document.getElementById("header")
        let id = GetCookie("id")
        let token = GetCookie("token")
        if (token.length>0) {
            $.ajax({
                url:"/api/index",
                method:"post",
                data:{
                    id: id,
                    token: token
                },
                success(res){
                    if(res.code===1001) {
                        header.classList.remove("no-user")
                        header.classList.add("has-user")
                        document.getElementById("username").innerText = res.user
                    } else {
                        AddMessage("warning", "用户令牌过期")
                        header.classList.remove("has-user")
                        header.classList.add("no-user")
                    }
                }
            })
        }else{
            header.classList.remove("has-user")
            header.classList.add("no-user")
        }
    }
    checkLogin()

    // 产品参数选择
    let color = ""
    let version = ""
    let pid = -1
    const productData = <%- JSON.stringify(product) %>;
    const none = document.getElementById("none")
    const one = document.getElementById("one")
    const seeA = document.getElementById("see-evaluate")
    function addVersion() {
        // 在这里可以通过JavaScript使用productData变量进行进一步操作
        if (productData.length > 0) {
            document.title = productData[0].pname + "-维多购物平台"
            none.style.display = "none"
            document.getElementById("one-image").src = "./images/" + productData[0].pclass + "/" + productData[0].pname + ".webp"
            document.getElementById("one-name").innerText = productData[0].pname
            document.getElementById("one-config").innerText = productData[0].pconfig
            seeA.href = "/onevaluate?name=" + productData[0].pname
            let tempV = ""
            let html = ""
            // 容错机制
            if (productData[0].pversion === "")
                return
            for (let i = 0; i < productData.length; i++) {
                let checked = !i ? "checked" : ""
                if (tempV === productData[i].pversion)
                    continue
                tempV = productData[i].pversion
                html += `<label>
                        <input type="radio" name="version" value="`+ productData[i].pversion + `"`+ checked + `>
                        <span onclick="findColor(`+ i + `)">` + productData[i].pversion + `</span>
            </label>`
            }
            $("#one-version").append(html)
            findColor(0)
        } else {
            one.style.display = "none"
        }
    }

    function findColor(id) {
        version = productData[id].pversion
        let html = ""
        let count = 0
        for (let i = 0; i < productData.length; i++) {
            if (productData[id].pversion === productData[i].pversion) {
                let checked = !count ? "checked" : ""
                color = !count ? productData[i].pcolor : color
                html += `<label>
                        <input type="radio" name="pcolor" value="`+ productData[i].pcolor + `"`+ checked + `>
                        <span onclick="saveColor(`+ i + `)">` + productData[i].pcolor + `</span>
                        </label>`
                count++
            }
        }
        document.getElementById("one-color").innerHTML = html
        showPrice()
    }

    function saveColor(id) {
        color = productData[id].pcolor
        showPrice()
    }
    
    function showPrice() {
        const choice = document.getElementById("one-choice")
        const price = document.getElementById("one-price")
        choice.innerHTML = productData[0].pname + " " + version + " " + color
        for (let i = 0; i < productData.length; i++) {
            if (version === productData[i].pversion && color === productData[i].pcolor) {
                price.innerHTML = "总计：" + productData[i].pprice
                pid = productData[i].pid
                return
            } else {
                price.innerHTML = "暂无报价"
            }
        }
    }
    addVersion()

    function addTrolley() {
        let id = GetCookie("id")
        let token = GetCookie("token")
        if (token.length>0) {
            $.ajax({
            url:"/api/addtrolley",
            method:"post",
            data:{
                uid: GetCookie("id"),
                token: GetCookie("token"),
                pid: pid
            },
            success(res){
                if(res.code===1001) {
                    AddMessage("success", "加入成功")
                    document.getElementById("one").style.display = "none"
                    document.getElementById("add-success").style.display = "flex"
                    const count = document.getElementById("count-trolley")
                    count.innerHTML = parseInt(count.innerHTML) + 1
                    window.scrollTo({
                        top: 0,
                        behavior: 'smooth' // 平滑滚动效果，可选
                    });
                } else {
                    AddMessage("warning", "用户令牌过期")
                    setTimeout(()=>{
                        location.href = "/account#login"
                    }, 500)
                }
            }
        })
        } else {
            AddMessage("error", "未登录")
            setTimeout(()=>{
                location.href = "/account#login"
            }, 500)
        }
    }

    function goBack() {
        location.reload()
    }

    function goTrolley() {
        location.href = "/trolley"
    }
</script>
</html>